﻿<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>Kinect Surfing Console</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        var lastInY = 0;
        var thisInY = 0;
        var lastOutY = 0;
        var thisOutY = 0;
        var altWindow;
        var headingWindow;
        var speedWindow;
        var bandwidthWindow;
        var kbps = 0.0;
        //var bearings = [ 'N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW'];

        var lastLat = 0.0;
        var lastLon = 0.0;
        var ballLat = 0.0;
        var ballLon = 0.0;

        $(function () {
            $(document).ready(function () {
                Highcharts.setOptions({
                    global: {
                        useUTC: false
                    }
                });

                var chartIn;
                chartIn = new Highcharts.Chart({
                    chart: {
                        renderTo: 'inbound',
                        type: 'spline',
                        marginRight: 10,
                        events: {
                            load: function () {

                                // set up the updating of the chart each second
                                var series = this.series[0];

                                setInterval(function () {
                                    var x = (new Date()).getTime(); // current time

                                    //$.getJSON('/cgi-bin/injson.pl', function(data) {
                                    //	$.each(data, function(key, val) {
                                    //		if (key == "in") { thisInY = parseInt(val); }
                                    //		//console.log("key:" + key + " val:" + parseInt(val) );
                                    //	});
                                    //});
                                    var rateInY = 10 * (thisInY - lastInY); // bytes * 10 = bps

                                    if (Math.abs(rateInY) > 1000000000) {
                                        rateInY = 0;
                                    }

                                    lastInY = thisInY;
                                    kbps = rateInY / 1024 / 1024;
                                    if (kbps < 10) {
                                        bandwidthWindow.innerHTML = kbps.toFixed(1);
                                    } else {
                                        bandwidthWindow.innerHTML = Math.round(kbps);
                                    }

                                    series.addPoint([x, rateInY], true, true);
                                }, 1000);
                            }
                        }
                    },
                    title: {
                        text: 'INTERNET DOWNLOAD BANDWIDTH'
                    },
                    xAxis: {
                        type: 'datetime',
                        tickPixelInterval: 150
                    },
                    yAxis: {
                        title: {
                            text: 'bits per second'
                        },
                        min: 0, // Alf
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    },
                    //  tooltip: {
                    //     formatter: function() {
                    //            return '<b>'+ this.series.name +'</b><br/>'+
                    //            Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
                    //            Highcharts.numberFormat(this.y, 2);
                    //      }
                    //  },
                    legend: {
                        enabled: false
                    },
                    exporting: {
                        enabled: false
                    },
                    series: [{
                        name: 'Internet IN',
                        type: 'areaspline', // was line
                        data: (function () {
                            // generate start data
                            var data = [],
                                    time = (new Date()).getTime(),
                                    i;

                            for (i = -19; i <= 0; i++) {
                                data.push({
                                    x: time + i * 1000,
                                    y: 0
                                });
                            }
                            return data;
                        })()
                    }]
                });
                // second chart
                var chartOut;
                chartOut = new Highcharts.Chart({
                    chart: {
                        renderTo: 'outbound',
                        type: 'spline',
                        marginRight: 10,
                        events: {
                            load: function () {

                                // set up the updating of the chart each second
                                var series = this.series[0];

                                setInterval(function () {
                                    var x = (new Date()).getTime(); // current time
                                    $.getJSON('/cgi-bin/netjson.pl', function (data) {
                                        $.each(data, function (key, val) {
                                            if (key == "out") {
                                                thisOutY = parseInt(val);
                                            }
                                            if (key == "in") {
                                                thisInY = parseInt(val);
                                            }
                                        });
                                    });
                                    var rateOutY = 10 * (thisOutY - lastOutY);
                                    if (Math.abs(rateOutY) > 1000000000) {
                                        rateOutY = 0;
                                    }

                                    lastOutY = thisOutY;

                                    series.addPoint([x, rateOutY], true, true);
                                }, 1000);
                            }
                        }
                    },
                    title: {
                        text: 'CACHE OUTPUT BANDWIDTH'
                    },
                    xAxis: {
                        type: 'datetime',
                        tickPixelInterval: 150
                    },
                    yAxis: {
                        title: {
                            text: 'bits per second'
                        },
                        min: 0,
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    },
                    //  tooltip: {
                    //     formatter: function() {
                    //            return '<b>'+ this.series.name +'</b><br/>'+
                    //            Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
                    //            Highcharts.numberFormat(this.y, 2);
                    //      }
                    //},
                    legend: {
                        enabled: false
                    },
                    exporting: {
                        enabled: false
                    },
                    series: [{
                        name: 'Cache OUT',
                        type: 'areaspline', // default is line
                        data: (function () {
                            // generate start data
                            var data = [],
                                    time = (new Date()).getTime(),
                                    i;

                            for (i = -19; i <= 0; i++) {
                                data.push({
                                    x: time + i * 1000,
                                    y: 0
                                });
                            }
                            return data;
                        })()
                    }]
                });

            });

        });
    </script>
    <script type="text/javascript">
        // ---- map object --- 

        var map = null;
        var markerRig = null;
        var markerModel = null;
        var follow = true;
        var curZoom = 11;

        function createRequestObject() {
            var ro;
            var browser = navigator.appName;
            if (browser == "Microsoft Internet Explorer") {
                ro = new ActiveXObject("Microsoft.XMLHTTP");
            } else {
                ro = new XMLHttpRequest();
            }
            return ro;
        }

        var http = createRequestObject();

        function request() {
            http.open('get', '/latlongalt');
            http.onreadystatechange = handleResponse;
            http.send(null);
        }

        function handleResponse() {

            if (http.readyState == 4) {
                var response = http.responseText;

                s = response.split(","); // place lat,long,alt into s[0],s[1],s[2]

                if (s.length == 4) {
                    var thisLat = parseFloat(s[0]);
                    var thisLon = parseFloat(s[1]);
                    var latlng = new google.maps.LatLng(thisLat, thisLon);
                    var latlngModel = new google.maps.LatLng(ballLat, ballLon);
                    var alt = Math.round(parseFloat(s[2]));
                    var heading = Math.round(parseFloat(s[3]));
                    if (alt < 10000) {
                        altWindow.innerHTML = alt + "m";
                    } else if (alt < 50000) {
                        var kalt = alt / 1000;
                        altWindow.innerHTML = kalt.toFixed(1) + "km";
                    } else if (alt < 1000000) {
                        altWindow.innerHTML = Math.round(alt / 1000) + "km";
                    } else {
                        altWindow.innerHTML = "Space";
                    }
                    var bearing = heading;
                    if (bearing < 0) {
                        bearing += 360;
                    }
                    var bindex = Math.floor(((bearing + 11) / 22.5) % 16);
                    markerRig.setIcon(bearingMarkers[bindex]);
                    var distance = greatcircle(lastLat, lastLon, thisLat, thisLon, alt);
                    var speed = distance * 5; // 4 a second
                    if (speed < 10) {
                        speedWindow.innerHTML = speed.toFixed(1);
                    } else if (speed < 400) {
                        speedWindow.innerHTML = Math.round(speed);
                    } else {
                        speedWindow.innerHTML = "Warp!";
                    }

                    if (follow) {

                        var zoom = Math.round(22 - (Math.log(Math.abs(alt)) / Math.log(2)));
                        if (zoom < 2) {
                            zoom = 2;
                        }
                        if (zoom > 15) {
                            zoom = 15;
                        }
                        if (zoom != curZoom) {
                            map.setZoom(zoom);
                            curZoom = zoom;
                        }
                        map.panTo(latlng);
                    }

                    lastLat = thisLat;
                    lastLon = thisLon;

                    markerRig.setPosition(latlng);
                    markerModel.setPosition(latlngModel);
                }

                setTimeout("request()", 250);
            }

            function toRad(val) {
                return val * Math.PI / 180;
            }

            function greatcircle(lat1, lon1, lat2, lon2, alt) {
                var R = 6371 + Math.round(alt) / 1000; // km
                var dLat = toRad(lat2 - lat1);
                var dLon = toRad(lon2 - lon1);
                var lat1 = toRad(lat1);
                var lat2 = toRad(lat2);

                var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(lat1) * Math.cos(lat2);
                var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
                var d = R * c;
                return d;
            }
        }
    </script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
            
    </script>
    <script type="text/javascript">
        var NIcon = new google.maps.MarkerImage('/images/N.png',
            new google.maps.Size(240, 240), new google.maps.Point(0, 0),
            new google.maps.Point(48, 48), new google.maps.Size(96, 96));
        var NNEIcon = new google.maps.MarkerImage('/images/NNE.png',
            new google.maps.Size(240, 240), new google.maps.Point(0, 0),
            new google.maps.Point(48, 48), new google.maps.Size(96, 96));
        var NEIcon = new google.maps.MarkerImage('/images/NE.png',
            new google.maps.Size(240, 240), new google.maps.Point(0, 0),
            new google.maps.Point(48, 48), new google.maps.Size(96, 96));
        var ENEIcon = new google.maps.MarkerImage('/images/ENE.png',
            new google.maps.Size(240, 240), new google.maps.Point(0, 0),
            new google.maps.Point(48, 48), new google.maps.Size(96, 96));
        var EIcon = new google.maps.MarkerImage('/images/E.png',
            new google.maps.Size(240, 240), new google.maps.Point(0, 0),
            new google.maps.Point(48, 48), new google.maps.Size(96, 96));
        var ESEIcon = new google.maps.MarkerImage('/images/ESE.png',
            new google.maps.Size(240, 240), new google.maps.Point(0, 0),
            new google.maps.Point(48, 48), new google.maps.Size(96, 96));
        var SEIcon = new google.maps.MarkerImage('/images/SE.png',
            new google.maps.Size(240, 240), new google.maps.Point(0, 0),
            new google.maps.Point(48, 48), new google.maps.Size(96, 96));
        var SSEIcon = new google.maps.MarkerImage('/images/SSE.png',
            new google.maps.Size(240, 240), new google.maps.Point(0, 0),
            new google.maps.Point(48, 48), new google.maps.Size(96, 96));
        var SIcon = new google.maps.MarkerImage('/images/S.png',
            new google.maps.Size(240, 240), new google.maps.Point(0, 0),
            new google.maps.Point(48, 48), new google.maps.Size(96, 96));
        var SSWIcon = new google.maps.MarkerImage('/images/SSW.png',
            new google.maps.Size(240, 240), new google.maps.Point(0, 0),
            new google.maps.Point(48, 48), new google.maps.Size(96, 96));
        var SWIcon = new google.maps.MarkerImage('/images/SW.png',
            new google.maps.Size(240, 240), new google.maps.Point(0, 0),
            new google.maps.Point(48, 48), new google.maps.Size(96, 96));
        var WSWIcon = new google.maps.MarkerImage('/images/WSW.png',
            new google.maps.Size(240, 240), new google.maps.Point(0, 0),
            new google.maps.Point(48, 48), new google.maps.Size(96, 96));
        var WIcon = new google.maps.MarkerImage('/images/W.png',
            new google.maps.Size(240, 240), new google.maps.Point(0, 0),
            new google.maps.Point(48, 48), new google.maps.Size(96, 96));
        var WNWIcon = new google.maps.MarkerImage('/images/WNW.png',
            new google.maps.Size(240, 240), new google.maps.Point(0, 0),
            new google.maps.Point(48, 48), new google.maps.Size(96, 96));
        var NWIcon = new google.maps.MarkerImage('/images/NW.png',
            new google.maps.Size(240, 240), new google.maps.Point(0, 0),
            new google.maps.Point(48, 48), new google.maps.Size(96, 96));
        var NNWIcon = new google.maps.MarkerImage('/images/NNW.png',
            new google.maps.Size(240, 240), new google.maps.Point(0, 0),
            new google.maps.Point(48, 48), new google.maps.Size(96, 96));
        var bearingIcons = ['/images/N.png', '/images/NNE.png', '/images/NE.png', '/images/ENE.png', '/images/E.png', '/images/ESE.png', '/images/SE.png', '/images/SSE.png', '/images/S.png', '/images/SSW.png', '/images/SW.png', '/images/WSW.png', '/images/W.png', '/images/WNW.png', '/images/NW.png', '/images/NNW.png'];
        var bearingMarkers = [NIcon, NNEIcon, NEIcon, ENEIcon, EIcon, ESEIcon, SEIcon, SSEIcon,
            SIcon, SSWIcon, SWIcon, WSWIcon, WIcon, WNWIcon, NWIcon, NNWIcon];

        function map_initialize() {
            var latlng = new google.maps.LatLng(-33.85, 151.644);
            var myOptions = {
                zoom: curZoom,
                center: latlng,
                disableDefaultUI: true,
                mapTypeId: google.maps.MapTypeId.TERRAIN
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


            markerRig = new google.maps.Marker({
                position: latlng,
                map: map,
                title: "Kinect Surfer",
                icon: NIcon
            });

            var ballIconPath = '/images/beachball32.png';
            var ballPoint = new google.maps.Point(16, 16); // make middle of ball the anchor
            var ballMarkerImage = new google.maps.MarkerImage(ballIconPath, null, null, ballPoint, null);

            markerModel = new google.maps.Marker({
                position: latlng,
                map: map,
                title: "Tablet",
                icon: ballMarkerImage
            });

            request();
        }
    </script>
    <script type="text/javascript" src="dotman.js"></script>
    <script type="text/javascript">
        // launch map after everything is drawn
        if (window.addEventListener) window.addEventListener('load', map_initialize, false);
        else window.attachEvent('onload', map_initialize);
    </script>
    <style type="text/css">
        html
        {
            height: 100%;
        }
        body
        {
            height: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
            font-family: sans-serif;
        }
        .right
        {
            position: absolute;
            right: 0px;
        }
        #dotman_canvas
        {
            margin: 0px 0px;
            background: #3E576F;
        }
        .crush
        {
            line-height: 0.5;
        }
        smallBr
        {
            font-size: 150%;
            line-height: 1;
        }
        table
        {
            border: 0px;
            width: 100%;
            height: 100%;
        }
        #inbound
        {
            min-width: 720px;
            min-height: 170px;
        }
        #outbound
        {
            min-width: 720px;
            min-height: 170px;
        }
    </style>
</head>
<body>
    <script type="text/javascript" src="../highcharts/js/highcharts.js"></script>
    <table cellpadding="12px" cellspacing="0px">
        <tr>
            <td width="40%" height="100%" valign="top" align="center">
                <br />
                <img alt="Wonderama" src="./images/wonderama-surfer-white.png" width="860" />
                <p style="font-family: sans-serif; font-size: 32pt; color: #3E576F; line-height: 0.1">
                    University of Western Sydney</p>
                <p style="font-size: 21pt; color: #3E576F; line-height: 0.01">
                    eResearch + School of Computing, Engineering &amp; Mathematics</p>
            </td>
            <td width="20%" align="center">
                <img alt="UWS" src="./images/uws-big2.png" width="185" />
                <br />
                <br />
                <img alt="gsoc" src="./images/gsoc.jpg" width="191" />
                <br />
                <br />
                <img alt="aarnet" src="./images/aarnet3.gif" width="185" />
            </td>
            <td width="40%">
                <div id="inbound">
                </div>
                <div id="outbound">
                </div>
            </td>
        </tr>
        <!-- bottom 2 thirds -->
        <tr>
            <td align="center" valign="top">
                <div id="map_canvas" style="height: 665px">
                </div>
            </td>
            <td valign="top" align="center">
                <br />
                <br />
                <p style="font-size: 160%; color: #3E576F; line-height: 0.0">
                    Altitude</p>
                <p style="font-size: 400%; color: black; line-height: 0.0;">
                    <label id="altwindow">
                        ALT</label>
                </p>
                <p class="smallBr">
                    &nbsp;</p>
                <p style="font-size: 160%; color: #3E576F; line-height: 0.0">
                    Speed (km/sec)</p>
                <p style="font-size: 440%; color: black; line-height: 0.0">
                    <label id="speedwindow">
                        SPD</label>
                </p>
                <p class="smallBr">
                    &nbsp;</p>
                <p style="font-size: 150%; color: #3E576F; line-height: 0.0">
                    Bandwidth&nbsp;(mbps)</p>
                <p style="font-size: 440%; color: black; line-height: 0.0">
                    <label id="bandwidthwindow">
                        MBPS</label>
                </p>
            </td>
            <td valign="top" align="right">
                <canvas id="dotman_canvas" width="760" height="570"></canvas>
                <p style="font-family: monospace; color: #000; font-size=10pt;">
                    <label id="logwindow">
                        1some websocket console text some websocket console text some websocket console
                        text
                        <br />
                    </label>
                </p>
            </td>
        </tr>
    </table>
</body>
</html>
